<template>
	<!-- <div class="div1">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>积分管理</el-breadcrumb-item>
		</el-breadcrumb>
	</div> -->
	<BreadCrumb pathOne="积分管理"></BreadCrumb>
	<el-form :inline="true" :model="form" class="demo-form-inline" size="large">
		<el-form-item label="用户名">
			<el-input v-model="form.username" placeholder="请输入用户名" clearable />
		</el-form-item>
		<el-form-item label="昵称">
			<el-input v-model="form.nickname" placeholder="请输入昵称" clearable />
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="query">搜索</el-button>
		</el-form-item>

	</el-form>
	<el-table :data="tableData" style="width: 100%" border  :row-style="{ height: '58px' }">
		<el-table-column type="selection"  width="50" />
		<el-table-column prop="id" label="ID" />
		<el-table-column prop="userId" label="用户ID" />
		<el-table-column prop="user.nickname" label="用户昵称" />
		<el-table-column prop="user.username" label="用户名称" />
		<el-table-column prop="points" label="积分" />
		<el-table-column label="操作" width="150">
			<template #default="scope">
				<el-button size="default" type="primary" @click="check(scope.row.id)">查看</el-button>
			</template>
		</el-table-column>
	</el-table>
	<!-- 分页参数 -->
	<div class="demo-pagination-block">
		<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10,15, 20]"
			:size="size" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
			@current-change="handleCurrentChange" />
	</div>
	
	<el-dialog v-model="edit"  title="积分详情" >
		<el-form :model="editForm" label-width="auto" label-position='right'>
			<el-form-item label="用户ID">
				<el-input v-model="editForm.userId" readonly />
			</el-form-item>
			<el-form-item label="用户昵称">
				<el-input v-model="editForm.nickname" readonly />
			</el-form-item>
			<el-form-item label="用户名称" >
				<el-input v-model="editForm.username" readonly />
			</el-form-item>
			<el-form-item label="积分">
				<el-input v-model="editForm.points" readonly/>
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="editNo()">关闭</el-button>
			</div>
		</template>
	</el-dialog>

</template>

<script lang="ts" setup>
	import {
		getCurrentInstance,
		onMounted,
		reactive,
		ref
	} from 'vue';
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus';
	import BreadCrumb from "../components/BreadCrumb.vue"
import { Logger } from 'sass-embedded';
	const axios = getCurrentInstance().appContext.config.globalProperties.axios;
	const form = reactive({
		username: '',
		nickname: '',
	})
	const tableData = ref([])
	const total = ref(0)
	const currentPage = ref(1) // 当前页
	const pageSize = ref(10) // 每页显示条目数
	const size = 'default' // 分页大小
	const handleSizeChange = (val) => {
		pageSize.value = val;
		query();
	}
	const handleCurrentChange = (val) => {
		currentPage.value = val
		query();
	}
	const query = () => {
		axios.get(`points/page?pageNum=${currentPage.value}&pageSize=${pageSize.value}&user.username=${form.username}&user.nickname=${form.nickname}`)
		.then(resp => {
			if (resp.code == 200) {
				tableData.value = resp.data.list;
				total.value = resp.data.total;
				
			} else {
				ElMessage.error('查询失败')
			}
		})
	}
	//查看
	const edit = ref(false)
	const editForm = reactive({
		userId:'',
		nickname:'',
		username:'',
		points:''
	})
	
	const check = (id) => {
		edit.value=true;
		console.log(id);
		axios.get(`points/${id}`).then((resp) =>{
			console.log(resp)
			editForm.userId = resp.data.userId,
			editForm.nickname = resp.data.user.nickname,
			editForm.username = resp.data.user.username,
			editForm.points = resp.data.points
		})
	}
	
	const editNo = () => {
		edit.value = false;
		ElMessage('取消查看')
	}
	// const remove = (id) => {
	// 	console.log('当前行的数据', id);
	// 	ElMessageBox.confirm(
	// 		'此操作将永久删除该数据, 是否继续?',
	// 		'提示', {
	// 		confirmButtonText: '确认',
	// 		cancelButtonText: '取消',
	// 		type: 'warning',
	// 	}
	// 	)
	// 		.then(() => {
	// 			axios.delete(`integral/${id}`).then((resp) => {
	// 				console.log('删除后：', resp);
	// 				if (resp.code == 200) {
	// 					ElMessage({
	// 						message: '删除成功',
	// 						type: 'success',
	// 					})
	// 				} else {
	// 					ElMessage.error('删除失败')
	// 				}
	// 			}).finally(() => {
	// 				query();
	// 			});

	// 		})
	// 		.catch(() => {
	// 			ElMessage({
	// 				type: 'info',
	// 				message: '取消删除',
	// 			})
	// 		})

	// }
	// const ids = ref('')
	// const handleSelectionChange = (selection) => {
	// 	ids.value = selection.map(item => item.id).join(',')
	// 	console.log('批量删除的ids为:', ids.value)
	// }
	// const batchDelete = () => {
	// 	console.log('ids', ids.value);
	// 	if (!ids.value) {
	// 		ElMessage.info('请选择要删除的数据')
	// 		return
	// 	}
	// 	ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
	// 		confirmButtonText: '确定',
	// 		cancelButtonText: '取消',
	// 		type: 'warning'
	// 	}).then(() => {
	// 		axios.delete(`sysPermission?ids=${ids.value}`).then(res => {
	// 			ElMessage.success('删除成功')
	// 			query();
	// 		})
	// 	}).catch(() => {
	// 		ElMessage.info('已取消删除')
	// 	}).finally(() => {
	// 		query();
	// 	});
	// }
	//生命周期：组件加载时获取数据
	onMounted(() => {
		query()
	})
</script>

<style scoped>
	.div1 {
		border-bottom: 1px solid #eeeeee;
		width: 100%;
		/* height: 30px; */
	}

	.demo-form-inline {
		color: #696a6e;
	}
</style>